<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Docking Code</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/static/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/static/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/static/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/static/css/app.css">
    <link rel="stylesheet" href="/static/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/static/checkbox/css/jquery-labelauty.css">
    <script src="/static/js/jquery.min.js"></script>
    <style>
        ul { list-style-type: none;}
        li { display: inline-block;}
        li { margin: 10px 0;}
        input.labelauty + label { font: 12px "Microsoft Yahei";}
    </style>
</head>
<body class="theme-white">
<div class="am-g tpl-g">
    <div class="portlet-body form">
        <form id="createcontroller" class="am-form" action="/node/createcontroller" method="post">
            <fieldset>
                <legend>创建控制器</legend>
                <div class="form-group">
                    <button id="changeTypes" type="button" class="am-btn am-btn-default am-btn-success am-radius "
                    > 切换
                        <input style="display:none;" type="text" value="2">
                    </button>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-3">名称
                        <span class="required" aria-required="true"> * </span>
                    </label>
                    <div id="selectModal" class="col-md-4">
                        <!--<span class="help-block"> Provide your username </span>-->
                    </div>
                </div>

                <div class="am-form-group">

                    <ul class="dowebok">
                        <li><input type="checkbox" name="check" value="1" data-labelauty="基本"></li>
                        <li><input type="checkbox" name="check" value="2" data-labelauty="Json接口"></li>
                        <li><input type="checkbox" name="check" value="3" data-labelauty="Modal接口"></li>
                    </ul>
                </div>

                <p>
                    <button type="submit" class="am-btn am-btn-default">提交</button>
                </p>
                <script>
                    var html = $("#selectModal").html();
                    html += '<input id="selectTable" name="Name" type="text" class="form-control">';
                    $("#selectModal").html(html);
                    $("#changeTypes").on("click", function(){

                        var html = [];
                        if($("#changeTypes").find("input").val() === "2") {


                            $.ajax({
                                type : "get",
                                url : "/updateJsonDB",
                                async : false,
                                success : function(data){
                                    console.log(data[1].TableName);
                                    html += '<div class="form-group" >';
                                    html += '<div class="col-md-4" >';
                                    html += '<select id="selectTable" name="Name" class="form-control select2-allow-clear">';
                                    html += '<option></option>';
                                    for (var i = 0; i < data.length; i++) {
                                        html += '<option value="'+ data[i].TableName +'" >'+ data[i].TableName +'</option>';
                                    }
                                    html += '</select>';
                                    html += '</div>';
                                    html += '</div>';

                                    $("#selectModal").html(html)
                                }
                            });

                            $("#changeTypes").find("input").val("1");

                        } else if($("#changeTypes").find("input").val() === "1") {
                           html += '<input id="selectTable" name="Name" type="text" class="form-control">'

                           $("#selectModal").html(html);

                           $("#changeTypes").find("input").val("2");
                        }
                    });
                </script>
            </fieldset>
        </form>
    </div>
</div>
</body>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script src="/static/checkbox/js/jquery-labelauty.js"></script>
<script>
    $(function () {

        $(function(){
            $(':input').labelauty();
        });

        $("form").submit(function () {
            var $form = $(this);
            $.post($form.attr("action"), $form.serialize(), function (data) {

                if (data === true) {
                    layer.msg("添加成功", {
                        shift: 1
                    });
                    setTimeout(function () {
                        window.parent.location.reload();
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }, 1000);

                    return false;
                } else {
                    layer.msg(data.message, {
                        shift: 5
                    });
                    return false;
                }
            }, "json");
            return false;
        });
    });
</script>
</html>